<template>
    <div>
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="searchParam.keywords"
                    placeholder="新闻或内容"
                />
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="searchParam.type"
                    placeholder="新闻类型"
                >
                    <el-option label="本地新闻" value="1"/>
                    <el-option label="其他新闻" value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" @click="search" size="small">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.headlineNews" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="70px"/>
            <el-table-column fixed prop="avatar" label="封面图" align="center" width="150px">
                <template #default="scope">
                    <el-avatar
                        :src="scope.row.coverImage"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center" width="300px"/>
            <el-table-column prop="description" label="描述" align="center" width="300px"/>
            <el-table-column prop="source" label="新闻来源" align="center" width="150px"/>
            <el-table-column prop="publishDate" label="发布日期" align="center" width="160px"/>
            <el-table-column prop="location" label="新闻所属地" align="center" width="150px"/>
            <el-table-column prop="type" label="新闻类型" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        v-show="scope.row.type === 1" type="primary"
                        disable-transitions
                    >本地新闻
                    </el-tag>
                    <el-tag
                        v-show="scope.row.type === 2" type="success"
                        disable-transitions
                    >其他新闻
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="toHeadlineNewsDetail(scope.row.uuid)"
                        type="info"
                        size="small"
                    >详情
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该新闻吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteHeadlineNews(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.total"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChange"
        >
        </el-pagination>
    </div>
</template>

<script>
import {reactive, onMounted} from "vue";
import {page, deleted} from "@/api/headlineNews/headlineNews";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

export default {
    setup() {
        const searchParam = reactive({
            page: 1,
            size: 10,
            keywords: '',
            type: ''
        })
        const data = reactive({
            headlineNews: [],
            total: 0
        })
        const router = useRouter()
        /**
         * 分页查询头条新闻
         */
        const pageSearchHeadlineNews = () => {
            page(searchParam).then(res => {
                data.headlineNews = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 分页
         * @param value
         */
        const currentChange = (value) => {
            searchParam.page = value
            pageSearchHeadlineNews()
        }

        /**
         * 搜索查询
         * @returns {Promise<void>}
         */
        const search = async () => {
            pageSearchHeadlineNews()
        }
        /**
         * 跳转到新闻详情
         * @param uuid
         */
        const toHeadlineNewsDetail = (uuid) => {
            router.push({path: '/headlineNews/detail', query: {uuid: uuid}})
        }
        /**
         * 删除头条新闻
         * @param uuid
         */
        const deleteHeadlineNews = (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchHeadlineNews()
            })
        }
        onMounted(() => {
            pageSearchHeadlineNews()
        })
        return {
            searchParam,
            data,
            currentChange,
            search,
            toHeadlineNewsDetail,
            deleteHeadlineNews
        }
    }
}
</script>